Átfogó útmutató a frontend mikro-frontend routinghoz, amely feltárja az alkalmazások közötti navigációs stratégiákat, előnyöket, implementációs technikákat és a bevált módszereket.
Frontend Mikro-Frontend Router: Alkalmazások közötti navigáció
A modern webfejlesztésben a mikro-frontend architektúra jelentős népszerűségre tett szert a nagy, összetett alkalmazások építésének egyik módjaként. Ez magában foglalja a monolitikus frontend felosztását kisebb, független és telepíthető egységekre (mikro-frontends). Ennek az architektúrának az egyik központi kihívása az alkalmazások közötti navigáció kezelése, amely lehetővé teszi a felhasználók számára, hogy zökkenőmentesen mozogjanak ezen független mikro-frontends között. Ez a cikk átfogó útmutatót nyújt a frontend mikro-frontend routinghoz és az alkalmazások közötti navigációhoz.
Mik azok a Mikro-Frontends?
A mikro-frontends egy olyan architekturális stílus, ahol a függetlenül szállítható frontend alkalmazások egyetlen, összefüggő felhasználói élményt alkotnak. Ez analóg a háttérben található mikroszolgáltatásokkal. Minden mikro-frontend tipikusan egy külön csapat tulajdonában van, ami nagyobb autonómiát, gyorsabb fejlesztési ciklusokat és egyszerűbb karbantartást tesz lehetővé. A mikro-frontends előnyei a következők:
- Független telepítés: A csapatok anélkül telepíthetik a mikro-frontendjeiket, hogy az alkalmazás más részeire hatással lennének.
- Technológiai sokféleség: Különböző mikro-frontends építhetők különböző technológiákkal, lehetővé téve a csapatok számára, hogy kiválasszák a munkához legmegfelelőbb eszközt. Például egy csapat React-et használhat, míg egy másik Vue.js-t vagy Angulart.
- Skálázhatóság: Az alkalmazás könnyebben skálázható, mivel minden mikro-frontend külön-külön skálázható.
- Jobb karbantarthatóság: A kisebb kódbázisok könnyebben érthetők és karbantarthatók.
- Csapat autonómiája: A csapatok nagyobb kontrollt gyakorolnak a saját kódjuk és fejlesztési folyamatuk felett.
A Mikro-Frontend Router szükségessége
Jól definiált routing stratégia nélkül a felhasználók széteső és frusztráló élményben részesülnek a mikro-frontends közötti navigálás során. A mikro-frontend router ezt úgy kezeli, hogy központi mechanizmust biztosít a navigáció kezelésére az egész alkalmazásban. Ez magában foglalja a következőket:
- URL-kezelés: Biztosítja, hogy az URL pontosan tükrözze a felhasználó aktuális helyét az alkalmazáson belül.
- Állapotkezelés: Szükség esetén állapot megosztása a mikro-frontends között.
- Lusta betöltés: A mikro-frontends betöltése csak akkor, ha szükség van rájuk a teljesítmény javítása érdekében.
- Hitelesítés és engedélyezés: Felhasználói hitelesítés és engedélyezés kezelése a különböző mikro-frontends között.
Alkalmazások közötti navigációs stratégiák
Több megközelítés is létezik az alkalmazások közötti navigáció megvalósítására egy mikro-frontend architektúrában. Mindegyik megközelítésnek megvannak a maga előnyei és hátrányai, és a legjobb választás az alkalmazás konkrét követelményeitől függ.1. Központi Router használata (Single-Spa)
A Single-Spa egy népszerű keretrendszer a mikro-frontends építéséhez. Központi routert használ a különböző alkalmazások közötti navigáció kezelésére. A fő alkalmazás a karmesterként működik, és felelős a mikro-frontends rendereléséért és leválasztásáért az aktuális URL alapján.
Hogyan működik:
- A felhasználó egy adott URL-re navigál.
- A single-spa router elfogja az URL-változást.
- Az URL alapján a router meghatározza, melyik mikro-frontend legyen aktív.
- A router aktiválja a megfelelő mikro-frontendet, és leválasztja az összes többi aktív mikro-frontendet.
Példa (Single-Spa):
Tegyük fel, hogy három mikro-frontendje van: home, products és cart. A single-spa router a következőképpen lenne konfigurálva:
import { registerApplication, start } from 'single-spa';
registerApplication(
'home',
() => import('./home/home.app.js'),
location => location.pathname === '/'
);
registerApplication(
'products',
() => import('./products/products.app.js'),
location => location.pathname.startsWith('/products')
);
registerApplication(
'cart',
() => import('./cart/cart.app.js'),
location => location.pathname.startsWith('/cart')
);
start();
Ebben a példában minden mikro-frontend regisztrálva van a single-spa-val, és egy függvényt biztosítanak annak meghatározására, hogy a mikro-frontend mikor legyen aktív az URL alapján. Amikor a felhasználó a /products oldalra navigál, a products mikro-frontend aktiválódik.
Előnyök:
- Központosított vezérlés a routing felett.
- Egyszerűsített állapotkezelés (a single-spa karmester kezelheti).
- Könnyen integrálható a meglévő alkalmazásokkal.
Hátrányok:
- Egyetlen hibaforrás. Ha a karmester leáll, az egész alkalmazás érintett.
- Teljesítmény szűk keresztmetszetté válhat, ha nem hatékonyan valósítják meg.
2. Modul Föderáció (Webpack 5)
A Webpack 5 Module Federation lehetővé teszi a kód megosztását a különböző Webpack build-ek között futásidőben. Ez azt jelenti, hogy komponenseket, modulokat vagy akár egész alkalmazásokat is exponálhat egy build-ből (a hostból) egy másikba (a remote-ba). Ez megkönnyíti a mikro-frontends építését, ahol minden mikro-frontend egy külön Webpack build.Hogyan működik:
- Minden mikro-frontend külön Webpack projektként épül fel.
- Az egyik mikro-frontend host alkalmazásként van kijelölve.
- A host alkalmazás meghatározza, mely modulokat kívánja felhasználni a remote mikro-frontends-ből.
- A remote mikro-frontends meghatározza, mely modulokat kívánja exponálni a host alkalmazás számára.
- Futásidőben a host alkalmazás betölti az exponált modulokat a remote mikro-frontends-ből szükség szerint.
Példa (Modul Föderáció):
Tegyük fel, hogy van egy host alkalmazás és egy remote alkalmazás.
host/webpack.config.js:
const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {
// ...
plugins: [
new ModuleFederationPlugin({
name: 'host',
remotes: {
remote: 'remote@http://localhost:3001/remoteEntry.js',
},
shared: ['react', 'react-dom'],
}),
],
};
remote/webpack.config.js:
const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {
// ...
plugins: [
new ModuleFederationPlugin({
name: 'remote',
exposes: {
'./Button': './src/Button',
},
shared: ['react', 'react-dom'],
}),
],
};
Ebben a példában a host alkalmazás felhasználja a Button komponenst a remote alkalmazásból. A shared opció biztosítja, hogy mindkét alkalmazás ugyanazt a verziót használja a react és react-dom könyvtárakból.
Előnyök:
- Decentralizált architektúra. Minden mikro-frontend független, és külön-külön fejleszthető és telepíthető.
- Kódmegosztás. A Modul Föderáció lehetővé teszi a kód megosztását a különböző alkalmazások között futásidőben.
- Lusta betöltés. A modulok csak akkor töltődnek be, ha szükség van rájuk, javítva a teljesítményt.
Hátrányok:
- Bonyolultabb beállítani és konfigurálni, mint a single-spa.
- Gondos kezelést igényel a megosztott függőségek elkerülése érdekében a verzióütközések elkerülése érdekében.
3. Web Komponensek
A Web Komponensek egy olyan webes szabványok halmaza, amelyek lehetővé teszik az újrafelhasználható egyéni HTML elemek létrehozását. Ezek a komponensek bármilyen webalkalmazásban használhatók, függetlenül a használt keretrendszertől. Ez természetes választássá teszi őket a mikro-frontend architektúrákhoz, mivel technológia-agnosztikus módot biztosítanak a UI komponensek építésére és megosztására.Hogyan működik:
- Minden mikro-frontend UI-ját Web Komponensek halmazaként teszi elérhetővé.
- A fő alkalmazás (vagy egy másik mikro-frontend) felhasználja ezeket a Web Komponenseket úgy, hogy importálja és használja őket a HTML-jében.
- A Web Komponensek kezelik a saját renderelésüket és logikájukat.
Példa (Web Komponensek):
micro-frontend-a.js:
class MyComponent extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
Hello from Micro-Frontend A!
`;
}
}
customElements.define('micro-frontend-a', MyComponent);
index.html (fő alkalmazás):
Main Application
Main Application
Ebben a példában a micro-frontend-a.js fájl egy micro-frontend-a nevű Web Komponenst definiál. Az index.html fájl importálja ezt a fájlt, és használja a Web Komponenst a HTML-jében. A böngésző rendereli a Web Komponenst, és megjeleníti a "Hello from Micro-Frontend A!" szöveget.
Előnyök:
- Technológia-agnosztikus. A Web Komponensek bármilyen keretrendszerrel vagy keretrendszer nélkül is használhatók.
- Újrafelhasználhatóság. A Web Komponensek könnyen újrafelhasználhatók a különböző alkalmazásokban.
- Kapszulázás. A Web Komponensek kapszulázzák a saját stílusaikat és logikájukat, megakadályozva az ütközéseket az alkalmazás más részeivel.
Hátrányok:
- Bőbeszédűbb lehet a megvalósítás, mint más megközelítések.
- Polyfilleket igényelhet a régebbi böngészők támogatásához.
4. Iframes
Az Iframes (Inline Frames) egy régebbi, de még mindig életképes lehetőség a mikro-frontends izolálására. Minden mikro-frontend a saját iframe-jén belül fut, ami nagyfokú izolációt biztosít. Az iframe-ek közötti kommunikáció a postMessage API használatával érhető el.
Hogyan működik:
- Minden mikro-frontend külön webalkalmazásként van telepítve.
- A fő alkalmazás minden mikro-frontendet tartalmaz egy iframe-ben.
- A fő alkalmazás és a mikro-frontends közötti kommunikáció a
postMessageAPI használatával történik.
Példa (Iframes):
index.html (fő alkalmazás):
Main Application
Main Application
Ebben a példában az index.html fájl két iframe-et tartalmaz, amelyek mindegyike egy másik mikro-frontendre mutat.
Előnyök:
- Nagyfokú izoláció. A mikro-frontends teljesen el vannak szigetelve egymástól, megakadályozva az ütközéseket.
- Könnyen megvalósítható. Az Iframes egy egyszerű és jól érthető technológia.
Hátrányok:
- Nehéz lehet kommunikálni az iframe-ek között.
- Teljesítményproblémák adódhatnak a több iframe miatti többletterhelés miatt.
- Rossz felhasználói élmény a zökkenőmentes integráció hiánya miatt.
Állapotkezelés a Mikro-Frontends között
Az állapotkezelés a mikro-frontends között az alkalmazások közötti navigáció kritikus szempontja. Több stratégia is alkalmazható:
- URL-alapú állapot: Az állapot kódolása az URL-ben. Ez a megközelítés az alkalmazás állapotát megoszthatóvá teszi az URL-eken keresztül, és könnyen könyvjelzővel elláthatóvá teszi.
- Központosított állapotkezelés (Redux, Vuex): Globális állapotkezelő könyvtár használata az állapot megosztására a mikro-frontends között. Ez különösen hasznos összetett alkalmazásoknál, ahol jelentős a megosztott állapot.
- Egyéni események: Egyéni események használata az állapotváltozások kommunikálására a mikro-frontends között. Ez a megközelítés laza csatolást tesz lehetővé a mikro-frontends között.
- Böngésző tároló (LocalStorage, SessionStorage): Az állapot tárolása a böngésző tárolójában. Ez a megközelítés egyszerű állapotokhoz alkalmas, amelyeket nem kell megosztani az összes mikro-frontend között. Ügyeljen azonban a biztonsági szempontokra az érzékeny adatok tárolásakor.
Hitelesítés és engedélyezés
A hitelesítés és az engedélyezés minden webalkalmazás kritikus szempontjai, és még fontosabbá válnak egy mikro-frontend architektúrában. Gyakori megközelítések a következők:- Központosított hitelesítési szolgáltatás: Egy dedikált szolgáltatás kezeli a felhasználói hitelesítést, és tokeneket (pl. JWT) ad ki. A mikro-frontends ezután érvényesítheti ezeket a tokeneket a felhasználói engedélyezés meghatározásához.
- Megosztott hitelesítési modul: Egy megosztott modul felelős a hitelesítési logika kezeléséért. Ezt a modult az összes mikro-frontend használhatja.
- Edge hitelesítés: A hitelesítést a hálózat peremén kezelik (pl. fordított proxy vagy API átjáró használatával). Ez a megközelítés leegyszerűsítheti a hitelesítési logikát a mikro-frontends-ben.
Bevált módszerek a Mikro-Frontend Routinghoz
Íme néhány bevált módszer, amelyet érdemes szem előtt tartani a mikro-frontend routing megvalósításakor:
- Tartsa egyszerűen: Válassza ki a legegyszerűbb routing stratégiát, amely megfelel az Ön igényeinek.
- Válassza le a Mikro-Frontends-et: Minimalizálja a mikro-frontends közötti függőségeket a független fejlesztés és telepítés előmozdítása érdekében.
- Használjon következetes URL-struktúrát: Tartson fenn következetes URL-struktúrát az összes mikro-frontends-en, hogy javítsa a felhasználói élményt és a SEO-t.
- Valósítson meg lusta betöltést: Töltse be a mikro-frontends-et csak akkor, ha szükség van rájuk a teljesítmény javítása érdekében.
- Monitorozza a teljesítményt: Rendszeresen monitorozza a mikro-frontend alkalmazás teljesítményét, hogy azonosítsa és kezelje a szűk keresztmetszeteket.
- Hozzon létre egyértelmű kommunikációs csatornákat: Győződjön meg arról, hogy a különböző mikro-frontends-eken dolgozó csapatok egyértelmű kommunikációs csatornákkal rendelkeznek a fejlesztési erőfeszítések koordinálása és az integrációs problémák megoldása érdekében.
- Valósítson meg robusztus hibakezelést: Valósítson meg robusztus hibakezelést az egyes mikro-frontends hibáinak kecses kezelésére, és megakadályozza, hogy azok hatással legyenek a teljes alkalmazásra.
- Automatizált tesztelés: Valósítson meg átfogó automatizált tesztelést, beleértve az egységteszteket, az integrációs teszteket és a végpontok közötti teszteket, hogy biztosítsa a mikro-frontend alkalmazás minőségét és stabilitását.